<script setup lang='ts'>
import { ref, watch, onMounted } from 'vue'
import fetchData from "./components/echartsOptions"
import commonEchart from "/@/components/commonEchart/echartCommon.vue"
import { useRouter } from 'vue-router'
const { safetyMGTCockpitData, typeCourse, certificateType } = fetchData()

//切换培训计划
const coursesListItems: any = ref([])
const activeId = ref(2)
const activeTitleName = (item: any) => {
    activeId.value = item.id;
    coursesListItems.value = item.items;
}
//页面跳转
const router = useRouter()
const jumpPage = (type: string) => {
    switch (type) {
        case 'certification':
            router.push({
                path: '/oms/enterpriseInformation/enterpriseQualification'
            })
            break;
        case 'missionCenter':
            router.push({
                path: '/system/TaskCenter/TaskCenterType'
            })
            break;
        case 'examination':
            router.push({
                path: '/sms/EducationalTraining/MyExam'
            })
            break;
        case 'dutyRoster':
            router.push({
                path: '/sms/InstitutionalResponsibility/DutyRoster'
            })
            break;
        case 'studyGarden':
            router.push({
                path: '/sms/EducationalTraining/TrainingProgram'
            })
            break
        case 'supplier':
            router.push({
                path: '/oms/PartnerManagement/SupplierBasicInfo'
            })
            break
        case 'jobRequest':
            router.push({
                path: '/sms/OperationProcess/JobCreat'
            })
            break
        case 'tradeCertificate':
            router.push({
                path: '/oms/PeopleWorkType'
            })
            break
        case 'enterpriseBasicInfo':
            router.push({
                path: '/oms/enterpriseInformation/prodUnitInformation'
            })
            break
        default:
            break;
    }
}


// const list = [
//     { id: 561084498579525, v_CourseName: "课程名称0623", v_TypeName: "安全生产管理人员教育培训" },
//     { id: 557019902390341, v_CourseName: "测试课程", v_TypeName: "安全生产管理人员教育培训" },
//     { id: 556670365814853, v_CourseName: "12121", v_TypeName: "安全生产管理人员教育培训" },
//     { id: 556670365814858, v_CourseName: "2222", v_TypeName: "法律法规" },
//     { id: 556670365814834, v_CourseName: "3333", v_TypeName: "法律法规" },
//     { id: 556670365814839, v_CourseName: "3333", v_TypeName: "2法律法规111" },
//     { id: 556670365814836, v_CourseName: "3333", v_TypeName: "2法律法规111" },
// ]

watch(
    () => safetyMGTCockpitData.value.courses,
    (newVal) => {
        if (newVal) {
            const listName = newVal.map((item: any, index: number) => {
                return {
                    id: index,
                    titleName: item.v_TypeName,
                    items: []
                }
            })
            let uniqueData = [...listName.reduce((acc, obj) => {
                acc.set(obj.titleName, obj);
                return acc;
            }, new Map()).values()];

            newVal.forEach((item1: any) => {
                uniqueData.forEach((item2: any) => {
                    if (item1.v_TypeName === item2.titleName) {
                        item2.items.push(item1)
                    }
                })
            })
            setTimeout(() => {
                coursesList.value = uniqueData
                coursesListItems.value = coursesList.value[0].items
            }, 1000)
        }
    },
    {
        deep: true
    }
)

const coursesList: any = ref([])
onMounted(() => {

})

</script>
<template>
    <el-row class="organizationMGTCockpit">
        <el-row class="certificateList">
            <div class="title">资质证照</div>
            <ul class="certificateListUl" @click="jumpPage('certification')" style="cursor: pointer;">
                <li
                    :class="{ 'certificateListUlItem': true, 'certificateListUlItemActive': (!safetyMGTCockpitData.d_IssueDateA01 && !safetyMGTCockpitData.d_ValidityDateA01) || new Date(Date.now()) > new Date(safetyMGTCockpitData.d_ValidityDateA01) }">
                    <p class="certificateListUlItemName">
                        <span>营业执照</span>
                        <span v-if="!safetyMGTCockpitData.d_IssueDateA01 && !safetyMGTCockpitData.d_ValidityDateA01"
                            class="notPass">未设置</span>
                        <span v-else-if="new Date(Date.now()) > new Date(safetyMGTCockpitData.d_ValidityDateA01)"
                            class="stale">已过期</span>
                        <span v-else>正常</span>
                    </p>
                    <p class="certificateListUlItemTime">
                        <span>发证日期：{{ safetyMGTCockpitData.d_IssueDateA01 }}</span>
                        <span>有效日期：{{ safetyMGTCockpitData.d_ValidityDateA01 }}</span>
                    </p>
                </li>
                <li
                    :class="{ 'certificateListUlItem': true, 'certificateListUlItemActive': (!safetyMGTCockpitData.d_IssueDateD01 && !safetyMGTCockpitData.d_ValidityDateD01) || new Date(Date.now()) > new Date(safetyMGTCockpitData.d_ValidityDateD01) }">
                    <p class="certificateListUlItemName">
                        <span>危险化学品安全生产许可证</span>
                        <span v-if="!safetyMGTCockpitData.d_IssueDateD01 && !safetyMGTCockpitData.d_ValidityDateD01"
                            class="notPass">未设置</span>
                        <span v-else-if="new Date(Date.now()) > new Date(safetyMGTCockpitData.d_ValidityDateD01)"
                            class="stale">已过期</span>
                        <span v-else>正常</span>
                    </p>
                    <p class="certificateListUlItemTime">
                        <span>发证日期：{{ safetyMGTCockpitData.d_IssueDateD01 }}</span>
                        <span>有效日期：{{ safetyMGTCockpitData.d_ValidityDateD01 }}</span>
                    </p>
                </li>
                <li
                    :class="{ 'certificateListUlItem': true, 'certificateListUlItemActive': (!safetyMGTCockpitData.d_IssueDateD02 && !safetyMGTCockpitData.d_ValidityDateD02) || new Date(Date.now()) > new Date(safetyMGTCockpitData.d_ValidityDateD02) }">
                    <p class="certificateListUlItemName">
                        <span>危险化学品经营许可证</span>
                        <span v-if="!safetyMGTCockpitData.d_IssueDateD02 && !safetyMGTCockpitData.d_ValidityDateD02"
                            class="notPass">未设置</span>
                        <span v-else-if="new Date(Date.now()) > new Date(safetyMGTCockpitData.d_ValidityDateD02)"
                            class="stale">已过期</span>
                        <span v-else>正常</span>
                    </p>
                    <p class="certificateListUlItemTime">
                        <span>发证日期：{{ safetyMGTCockpitData.d_IssueDateD02 }}</span>
                        <span>有效日期：{{ safetyMGTCockpitData.d_ValidityDateD02 }}</span>
                    </p>
                </li>
                <li
                    :class="{ 'certificateListUlItem': true, 'certificateListUlItemActive': (!safetyMGTCockpitData.d_IssueDateD03 && !safetyMGTCockpitData.d_ValidityDateD03) || new Date(Date.now()) > new Date(safetyMGTCockpitData.d_ValidityDateD03) }">
                    <p class="certificateListUlItemName">
                        <span>危险化学品登记证</span>
                        <span v-if="!safetyMGTCockpitData.d_IssueDateD03 && !safetyMGTCockpitData.d_ValidityDateD03"
                            class="notPass">未设置</span>
                        <span v-else-if="new Date(Date.now()) > new Date(safetyMGTCockpitData.d_ValidityDateD03)"
                            class="stale">已过期</span>
                        <span v-else>正常</span>
                    </p>
                    <p class="certificateListUlItemTime">
                        <span>发证日期：{{ safetyMGTCockpitData.d_IssueDateD03 }}</span>
                        <span>有效日期：{{ safetyMGTCockpitData.d_ValidityDateD03 }}</span>
                    </p>
                </li>
                <li
                    :class="{ 'certificateListUlItem': true, 'certificateListUlItemActive': (!safetyMGTCockpitData.d_IssueDateZ01 && !safetyMGTCockpitData.d_ValidityDateZ01) || new Date(Date.now()) > new Date(safetyMGTCockpitData.d_ValidityDateZ01) }">
                    <p class="certificateListUlItemName">
                        <span>安全生产标准化证书或公告文件</span>
                        <span v-if="!safetyMGTCockpitData.d_IssueDateZ01 && !safetyMGTCockpitData.d_ValidityDateZ01"
                            class="notPass">未设置</span>
                        <span v-else-if="new Date(Date.now()) > new Date(safetyMGTCockpitData.d_ValidityDateZ01)"
                            class="stale">已过期</span>
                        <span v-else>正常</span>
                    </p>
                    <p class="certificateListUlItemTime">
                        <span>发证日期：{{ safetyMGTCockpitData.d_IssueDateZ01 }}</span>
                        <span>有效日期：{{ safetyMGTCockpitData.d_ValidityDateZ01 }}</span>
                    </p>
                </li>
            </ul>
        </el-row>
        <el-row justify="space-between" class="cockpitContent">
            <el-col class="left" :span="6">
                <el-row class="leftContent">
                    <el-col :span="24" class="leftContentOne">
                        <div class="herderIcon">
                            <span></span>
                            <span>任务情况</span>
                            <span></span>
                        </div>
                        <ul class="taskList" @click="jumpPage('missionCenter')" style="cursor: pointer;">
                            <li class="taskListItem">
                                <i class="taskIcon"></i>
                                <span>未处理</span>
                                <span class="taskListItemNum">{{ safetyMGTCockpitData.n_TaskTodoCount }}</span>
                            </li>
                            <li class="taskListItem">
                                <i class="taskIcon"></i>
                                <span>已处理</span>
                                <span class="taskListItemNum">{{ safetyMGTCockpitData.n_TaskCompletedCount }}</span>
                            </li>
                            <li class="taskListItem">
                                <i class="taskIcon"></i>
                                <span>即将到期</span>
                                <span class="taskListItemNum">{{ safetyMGTCockpitData.n_TaskNeartermCount }}</span>
                            </li>
                            <li class="taskListItem">
                                <i class="taskIcon"></i>
                                <span>已逾期</span>
                                <span class="taskListItemNum">{{ safetyMGTCockpitData.n_TaskOverdueCount }}</span>
                            </li>
                        </ul>
                    </el-col>
                    <el-col :span="24" class="leftContentTwo">
                        <div class="herderIcon">
                            <span></span>
                            <span>教育培训</span>
                            <span></span>
                        </div>
                        <div class="educationalTrain">
                            <ul class="educationalTrainTop" @click="jumpPage('examination')" style="cursor: pointer;">
                                <li class="educationalTrainTopOne">我的考试</li>
                                <li class="educationalTrainTopTwo">
                                    <p>
                                        <span>未完成</span>
                                        <span>{{ safetyMGTCockpitData.n_MyExamTodoCount }}</span>
                                    </p>
                                    <p>
                                        <span>已完成</span>
                                        <span>{{ safetyMGTCockpitData.n_MyExamCompletedCount }}</span>
                                    </p>
                                </li>
                                <li class="educationalTrainThree">课程类型</li>
                            </ul>
                            <p class="educationalTrainBottom">
                                <commonEchart v-if="typeCourse" :options="typeCourse" />
                            </p>
                        </div>
                    </el-col>
                    <el-col :span="24" class="leftContentThree">
                        <div class="herderIcon">
                            <span></span>
                            <span>节假日领导带班值守表</span>
                            <span></span>
                        </div>
                        <div class="dutyInfo">
                            <p class="dutyInfoLeft"></p>
                            <ul class="dutyInfoRight" @click="jumpPage('dutyRoster')" style="cursor: pointer;">
                                <li>
                                    <span>值班表名称：</span>
                                    <span>{{ safetyMGTCockpitData.v_DutyRosterName }}</span>
                                </li>
                                <li>
                                    <span>日期：</span>
                                    <span>{{ safetyMGTCockpitData.d_DutyRosterDate }}</span>
                                </li>
                                <li>
                                    <span>值班领导姓名：</span>
                                    <span>{{ safetyMGTCockpitData.v_LeaderName }}</span>
                                </li>
                                <li>
                                    <span>值班领导电话：</span>
                                    <span>{{ safetyMGTCockpitData.v_LeaderContacts }}</span>
                                </li>
                                <li>
                                    <span>值班人姓名：</span>
                                    <span>{{ safetyMGTCockpitData.watcherName }}</span>
                                </li>
                                <li>
                                    <span>值班人姓名电话：</span>
                                    <span>{{ safetyMGTCockpitData.v_WatcherContacts }}</span>
                                </li>
                            </ul>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
            <el-col class="middle" :span="11">
                <el-row justify="space-between" class="middleContent">
                    <el-col :span="24" class="middleContentTop">
                        <ul class="riskInfo">
                            <li>
                                <span>个人岗位</span>
                                <span>{{ safetyMGTCockpitData.v_EmpPost }}</span>
                            </li>
                            <li>
                                <span>岗位风险因素</span>
                                <span>{{ safetyMGTCockpitData.v_EmpPostRisk }}</span>
                            </li>
                            <li>
                                <span>岗位职责</span>
                                <span>{{ safetyMGTCockpitData.v_EmpPostDuty }}</span>
                            </li>
                            <li>
                                <span>控制措施</span>
                                <span>{{ safetyMGTCockpitData.v_EmpPostControlMeasures }}</span>
                            </li>
                            <li>
                                <span>{{ safetyMGTCockpitData.v_EmpName }}</span>
                                <span>姓名</span>
                            </li>
                        </ul>
                    </el-col>
                    <el-col :span="24" class="middleContentBottom">
                        <div class="herderIcon">
                            <span></span>
                            <span>学习园地</span>
                            <span></span>
                        </div>
                        <div class="studyGarden">
                            <ul class="studyGardenOne">
                                <li :class="{ 'selectLi': activeId === item.id }" v-for="item in coursesList"
                                    :key="item.id" @click="activeTitleName(item)">{{ item.titleName }}</li>
                            </ul>
                            <ul class="studyGardenTwo">
                                <li v-for="item in coursesListItems" :key="item.id" @click="jumpPage('studyGarden')">
                                    {{ item.v_CourseName }}
                                </li>
                            </ul>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
            <el-col class="right" :span="6">
                <el-row class="rightContent">
                    <el-col :span="24" class="rightContentOne">
                        <div class="herderIcon">
                            <span></span>
                            <span>企业概况</span>
                            <span></span>
                        </div>
                        <ul class="enterpriseInfo" @click="jumpPage('enterpriseBasicInfo')" style="cursor: pointer;">
                            <li>
                                <span>安全生成管理机构</span>
                                <span>成立日期</span>
                                <span>2023-02-22</span>
                                <i></i>
                            </li>
                            <li>
                                <span>主要负责人</span>
                                <span>{{ safetyMGTCockpitData.v_MainInChargeName }}</span>
                                <span>{{ safetyMGTCockpitData.v_MainInChargePhone }}</span>
                            </li>
                            <li>
                                <span>安全生产管理负责人</span>
                                <span>{{ safetyMGTCockpitData.v_SafetyProductionManagementName }}</span>
                                <span>{{ safetyMGTCockpitData.v_SafetyProductionManagementPhone }}</span>
                            </li>
                        </ul>
                    </el-col>
                    <el-col :span="24" class="rightContentTwo">
                        <div class="herderIcon">
                            <span></span>
                            <span>证书预警</span>
                            <span></span>
                        </div>
                        <ul class="rightContentTwoCertificateList">
                            <li v-for="item in safetyMGTCockpitData.cretwariings" :key="item.v_TypeName"
                                class="certificateListItem" @click="jumpPage('tradeCertificate')"
                                style="cursor: pointer;">
                                <p class="certificateListItemTop">
                                    <span>证书类型</span>
                                    <span style="font-weight: 500;color: rgb(255, 255, 255);">{{
                                        safetyMGTCockpitData.v_TypeName }}</span>
                                </p>
                                <div class="certificateListItemBottom">
                                    <p>
                                        <span>总计证书</span>
                                        <span style="color: rgb(0, 255, 253);">{{ safetyMGTCockpitData.n_AllCount
                                            }}</span>
                                    </p>
                                    <p>
                                        <span>将到期</span>
                                        <span style="color: rgb(255, 187, 0);">{{ safetyMGTCockpitData.n_WillBeDueCount
                                            }}</span>
                                    </p>
                                    <p>
                                        <span>已到期</span>
                                        <span style="color: rgb(255, 95, 51);">{{ safetyMGTCockpitData.n_ExpiredCount
                                            }}</span>
                                    </p>
                                </div>
                            </li>
                        </ul>
                    </el-col>
                    <el-col :span="24" class="rightContentThree">
                        <div class="herderIcon">
                            <span></span>
                            <span>公司证书占比</span>
                            <span></span>
                        </div>
                        <p class="companyCertificatePercent" @click="jumpPage('tradeCertificate')"
                            style="cursor: pointer;">
                            <commonEchart v-if="certificateType" :options="certificateType" />
                        </p>
                    </el-col>
                    <el-col :span="24" class="rightContentFour">
                        <div class="herderIcon">
                            <span></span>
                            <span>承包商管控</span>
                            <span></span>
                        </div>
                        <ul class="contractor">
                            <li class="contractorNum" @click="jumpPage('supplier')" style="cursor: pointer;">
                                <span>{{ safetyMGTCockpitData.n_ContractorCount || 0 }}</span>
                                <span>承包商数量</span>
                            </li>
                            <li class="buildNum" @click="jumpPage('jobRequest')" style="cursor: pointer;">
                                <span>{{ safetyMGTCockpitData.n_ContractorWorkingCount || 0 }}</span>
                                <span>正在施工(进场)数量</span>
                            </li>
                        </ul>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </el-row>
</template>
<style lang="scss">
@import '../style/public.scss';
</style>
<style scoped lang="scss">
* {
    box-sizing: border-box;
    list-style: none;
}

.organizationMGTCockpit {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url(/@/assets/oms_images/bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    color: #fff;

    //common
    .herderIcon {
        display: flex;
        justify-content: space-between;
        height: 30px;
        line-height: 30px;

        span {
            height: 30px;

            &:nth-child(1) {
                width: 4%;
                background-image: url(/@/assets/oms_images/icon1.png);
                background-position: 10% 50%;
                background-repeat: no-repeat;
                background-size: 80%;
            }

            &:nth-child(2) {
                margin: 0 10px;
                width: auto;
            }

            &:nth-child(3) {
                flex: 1;
                background-image: url(/@/assets/oms_images/icon2.png);
                background-position: center;
                background-repeat: no-repeat;
                background-size: 100%;
            }
        }
    }

    .certificateList {
        display: flex;
        flex-direction: column;
        height: 14%;
        width: 100%;

        .title {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 24%;
            width: 100%;
            background-image: url(/@/assets/oms_images/icon22.png);
            background-size: 10% 14%;
            background-position: 50% 100%;
            background-repeat: no-repeat;
            color: rgb(0, 244, 255);
        }

        .certificateListUl {
            height: 76%;
            display: flex;
            justify-content: space-evenly;

            .certificateListUlItem {
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                padding: 4px 20px;
                width: 18%;
                height: 100%;
                background-image: url(/@/assets/oms_images/icon23.png);
                background-size: 100% 100%;
                background-repeat: no-repeat;
                font-size: 12px;
                color: rgba(0, 244, 255, 0.4);

                .certificateListUlItemName {
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                    height: 30%;

                    span {
                        &:nth-child(1) {
                            font-weight: 700;
                            color: rgb(0, 244, 255);
                        }

                        &:nth-child(2) {
                            width: 20%;
                            text-align: center;
                            background-image: url(/@/assets/oms_images/icon25.png);
                            background-size: 100% 100%;
                            background-repeat: no-repeat;
                            color: #fff;
                        }
                    }
                }

                .certificateListUlItemTime {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: start;
                    width: 100%;
                    height: 60%;
                }
            }


            .certificateListUlItemActive {
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                padding: 0 20px;
                width: 19%;
                background-image: url(/@/assets/oms_images/icon24.png);
                background-size: 100% 100%;
                background-repeat: no-repeat;
                font-size: 12px;
                color: rgba(255, 255, 255, 0.4);

                .certificateListUlItemName {
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                    height: 30%;

                    span {
                        &:nth-child(1) {
                            font-weight: 700;
                            color: rgb(255, 255, 255);
                        }

                        &:nth-child(2) {
                            width: 20%;
                            text-align: center;
                            background-image: url(/@/assets/oms_images/icon26.png);
                            background-size: 100% 100%;
                            background-repeat: no-repeat;
                            color: #fff;
                        }
                    }
                }

                .certificateListUlItemTime {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: start;
                    width: 100%;
                    height: 60%;
                }
            }
        }
    }

    .cockpitContent {
        width: 100%;
        height: 86%;

        .left {
            height: 100%;

            .leftContent {
                height: 100%;

                .leftContentOne {
                    height: 30%;

                    .taskList {
                        display: flex;
                        align-items: center;
                        justify-content: space-around;
                        height: calc(100% - 30px);

                        .taskListItem {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            position: relative;
                            margin-top: 10px;
                            width: 22%;
                            height: 80%;
                            background-image: url(/@/assets/oms_images/icon10.png);
                            background-repeat: no-repeat;
                            background-size: 100% 100%;

                            &:nth-child(1) {
                                span {
                                    padding-top: 10px;
                                    font-size: 14px;
                                }

                                .taskListItemNum {
                                    font-size: 30px;
                                    color: rgb(0, 244, 255);
                                }
                            }

                            &:nth-child(2) {
                                span {
                                    padding-top: 10px;
                                    font-size: 14px;
                                }

                                .taskListItemNum {
                                    font-size: 30px;
                                    color: rgba(0, 255, 125, 0.8)
                                }
                            }

                            &:nth-child(3) {
                                span {
                                    padding-top: 10px;
                                    font-size: 14px;
                                }

                                .taskListItemNum {
                                    font-size: 30px;
                                    color: rgb(255, 187, 0)
                                }
                            }

                            &:nth-child(4) {
                                span {
                                    padding-top: 10px;
                                    font-size: 14px;
                                }

                                .taskListItemNum {
                                    font-size: 30px;
                                    color: rgb(255, 79, 31)
                                }
                            }


                            // .taskListItemNum{
                            //     font-size: 30px;
                            //     color: rgb(0, 244, 255);
                            // }

                            .taskIcon {
                                position: absolute;
                                left: 50%;
                                top: 0;
                                transform: translate(-50%, -36%);
                                width: 50%;
                                height: 50%;
                                background-image: url(/@/assets/oms_images/icon11.png);
                                background-repeat: no-repeat;
                                background-size: 100%;
                            }
                        }


                    }
                }

                .leftContentTwo {
                    height: 44%;

                    .educationalTrain {
                        height: calc(100% - 30px);

                        .educationalTrainTop {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                            height: 50%;
                            width: 100%;

                            .educationalTrainTopOne {
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                height: 24%;
                                width: 90%;
                                background-image: url(/@/assets/oms_images/icon12.png);
                                background-size: 100% 100%;
                                background-repeat: no-repeat;
                            }

                            .educationalTrainTopTwo {
                                height: 60%;
                                width: 100%;
                                display: flex;
                                padding: 0 80px;

                                p {
                                    display: flex;
                                    flex-direction: column;
                                    justify-content: center;
                                    align-items: center;
                                    width: 50%;

                                    span {
                                        font-size: 14px;

                                        &:nth-child(1) {}

                                        &:nth-child(2) {
                                            font-size: 26px;
                                            color: rgb(255, 95, 51);
                                        }
                                    }

                                    &:nth-child(2) {
                                        span {
                                            font-size: 14px;

                                            &:nth-child(1) {}

                                            &:nth-child(2) {
                                                font-size: 26px;
                                                color: rgb(0, 255, 253);
                                            }
                                        }
                                    }
                                }
                            }

                            .educationalTrainThree {
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                height: 24%;
                                width: 90%;
                                background-image: url(/@/assets/oms_images/icon13.png);
                                background-size: 100% 100%;
                                background-repeat: no-repeat;
                            }
                        }

                        .educationalTrainBottom {
                            height: 50%;
                        }
                    }
                }

                .leftContentThree {
                    height: 24%;

                    .dutyInfo {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        height: calc(100% - 30px);

                        .dutyInfoLeft {
                            width: 30%;
                            height: 80%;
                            background-image: url(/@/assets/oms_images/icon9.png);
                            background-size: 66%;
                            background-position: center;
                            background-repeat: no-repeat;
                        }

                        .dutyInfoRight {
                            flex: 1;
                            font-size: 12px;

                            li {
                                display: flex;
                                justify-content: safe;
                                align-items: center;

                                span {
                                    width: 40%;

                                    &:nth-child(1) {
                                        text-align: right;
                                        color: rgba(255, 255, 255, 0.6);
                                    }

                                    &:nth-child(2) {
                                        margin-left: 10px;
                                        text-align: left;
                                        color: rgb(0, 244, 255);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        .middle {
            height: 100%;

            .middleContent {
                height: 100%;

                .middleContentTop {
                    height: 58%;

                    .riskInfo {
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-evenly;
                        align-content: space-evenly;
                        position: relative;
                        height: 100%;
                        width: 100%;

                        li {
                            display: flex;
                            flex-direction: column;

                            span {
                                &:nth-child(1) {
                                    font-size: 16px;
                                    color: rgb(255, 187, 0);
                                }

                                &:nth-child(2) {
                                    font-size: 14px;
                                }
                            }

                            &:nth-child(1) {
                                padding: 20px 0 0 20px;
                                width: 48%;
                                height: 48%;
                                background-image: url(/@/assets/oms_images/icon14.png);
                                background-size: 100% 100%;
                                background-repeat: no-repeat;
                            }

                            &:nth-child(2) {
                                padding: 20px 20px 0 0;
                                text-align: right;
                                width: 48%;
                                height: 48%;
                                background-image: url(/@/assets/oms_images/icon15.png);
                                background-size: 100% 100%;
                                background-repeat: no-repeat;
                            }

                            &:nth-child(3) {
                                padding: 20px 0 0 20px;
                                width: 48%;
                                height: 48%;
                                background-image: url(/@/assets/oms_images/icon16.png);
                                background-size: 100% 100%;
                                background-repeat: no-repeat;
                            }

                            &:nth-child(4) {
                                padding: 20px 20px 0 0;
                                text-align: right;
                                width: 48%;
                                height: 48%;
                                background-image: url(/@/assets/oms_images/icon17.png);
                                background-size: 100% 100%;
                                background-repeat: no-repeat;
                            }

                            &:nth-child(5) {
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                align-items: center;
                                position: absolute;
                                left: 50%;
                                top: 50%;
                                width: 30%;
                                height: 60%;
                                transform: translate(-50%, -50%);
                                background-image: url(/@/assets/oms_images/icon18.png);
                                background-size: 100%;
                                background-repeat: no-repeat;

                                span {
                                    font-size: 14px;
                                    color: rgba(255, 255, 255, 0.6);

                                    &:nth-child(1) {
                                        font-size: 20px;
                                        color: #fff;
                                    }
                                }
                            }
                        }
                    }
                }

                .middleContentBottom {
                    height: 40%;

                    .studyGarden {
                        display: flex;
                        flex-direction: column;
                        height: 100%;
                        width: 100%;

                        .studyGardenOne {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: 100%;
                            height: 12%;
                            background-image: url(/@/assets/oms_images/icon19.png);
                            background-size: 100% 6%;
                            background-repeat: no-repeat;
                            background-position: 10% 100%;

                            li {
                                padding-bottom: 10px;
                                margin-right: 20px;
                                cursor: pointer;
                            }

                            .selectLi {
                                background-image: url(/@/assets/oms_images/icon20.png);
                                background-size: 100% 160%;
                                background-repeat: no-repeat;
                                background-position: 100% 60%;
                                color: rgb(0, 244, 255);
                            }
                        }

                        .studyGardenTwo {
                            // flex: 1;
                            display: flex;
                            justify-content: start;
                            flex-wrap: wrap;
                            margin: 0 auto;
                            height: 50%;
                            width: 100%;

                            li {
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                margin: 1% 1.8% 0 1%;
                                width: 18%;
                                height: 24%;
                                background-image: url(/@/assets/oms_images/icon21.png);
                                background-size: 100% 100%;
                                background-repeat: no-repeat;
                                font-size: 14px;
                                cursor: pointer;

                                &:nth-child(6n) {
                                    margin-right: 0;
                                }
                            }
                        }
                    }

                    .herderIcon {
                        span {

                            &:nth-child(1) {
                                width: 2.5%;
                            }
                        }
                    }
                }
            }


        }

        .right {
            height: 100%;

            .rightContent {
                height: 100%;

                .rightContentOne {
                    height: 20%;

                    .enterpriseInfo {
                        display: flex;
                        justify-content: space-evenly;
                        align-items: center;
                        height: calc(100% - 30px);
                        width: 100%;

                        li {
                            display: flex;
                            flex-direction: column;
                            justify-content: space-evenly;
                            align-items: center;
                            height: 80%;
                            width: 30%;
                            background-image: url(/@/assets/oms_images/icon5.png);
                            background-repeat: no-repeat;
                            background-size: 100% 100%;

                            span {
                                font-size: 12px;
                                color: rgb(0, 244, 255);

                                &:nth-child(1) {
                                    color: rgba(255, 255, 255, 0.6);
                                }
                            }

                            &:nth-child(1) {
                                position: relative;
                                background-image: url(/@/assets/oms_images/icon6.png);
                                background-repeat: no-repeat;
                                background-size: 100% 100%;

                                span {
                                    font-size: 12px;
                                    color: rgb(255, 187, 0);

                                    &:nth-child(1) {
                                        color: rgba(255, 255, 255, 0.6);
                                    }
                                }

                                i {
                                    display: block;
                                    position: absolute;
                                    top: 0;
                                    right: 0;
                                    width: 40%;
                                    height: 40%;
                                    background-image: url(/@/assets/oms_images/icon6.1.png);
                                    background-repeat: no-repeat;
                                    background-size: 100% 100%;

                                    &::before {
                                        content: '成立';
                                        display: block;
                                        text-align: center;
                                        transform: rotate(36deg);
                                        margin-left: 10px;
                                        padding-bottom: 10px;
                                        font-size: 12px;
                                    }
                                }
                            }
                        }
                    }
                }

                .rightContentTwo {
                    height: 29%;
                    width: 100%;

                    .rightContentTwoCertificateList {
                        display: flex;
                        justify-content: space-around;
                        align-items: center;
                        height: calc(100% - 30px);
                        width: 100%;
                        overflow: auto;

                        .certificateListItem {
                            display: flex;
                            flex-direction: column;
                            width: 30%;
                            height: 80%;
                            background-image: url(/@/assets/oms_images/icon7.png);
                            background-repeat: no-repeat;
                            background-size: 100% 100%;
                            font-size: 12px;
                            color: rgb(129, 163, 172);

                            .certificateListItemTop {
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: space-evenly;
                                height: 36%;
                                background-image: url(/@/assets/oms_images/icon8.png);
                                background-repeat: no-repeat;
                                background-position: 50% 100%;
                                background-size: 80% 4%;

                                span {
                                    font-size: 12px;
                                }
                            }

                            .certificateListItemBottom {
                                flex: 1;
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: space-evenly;

                                p {
                                    display: flex;
                                    justify-content: space-evenly;
                                    width: 100%;

                                    span {
                                        &:nth-child(1) {
                                            text-align: left;
                                            width: 50%;
                                        }

                                        &:nth-child(2) {
                                            width: 20%;
                                            text-align: right;
                                            font-size: 18px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                .rightContentThree {
                    height: 29%;

                    .companyCertificatePercent {
                        height: calc(100% - 30px);
                    }
                }

                .rightContentFour {
                    height: 20%;
                    width: 100%;

                    .contractor {
                        display: flex;
                        justify-content: space-evenly;
                        align-items: center;
                        height: calc(100% - 30px);
                        width: 100%;

                        .contractorNum {
                            width: 36%;
                            height: 100%;

                            span {
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: center;
                                font-size: 12px;

                                &:nth-child(1) {
                                    margin: 0 auto;
                                    height: 60%;
                                    width: 40%;
                                    background-image: url(/@/assets/oms_images/icon3.png);
                                    background-size: 100% 100%;
                                    background-repeat: no-repeat;
                                    background-position: center;
                                    font-size: 20px;
                                    font-weight: 700;
                                    color: rgb(0, 244, 255);
                                }

                                &:nth-child(2) {
                                    padding-top: 6px;
                                }
                            }
                        }

                        .buildNum {
                            width: 36%;
                            height: 100%;

                            span {
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: center;
                                font-size: 12px;

                                &:nth-child(1) {
                                    margin: 0 auto;
                                    height: 60%;
                                    width: 40%;
                                    background-image: url(/@/assets/oms_images/icon4.png);
                                    background-size: 100% 100%;
                                    background-repeat: no-repeat;
                                    background-position: center;
                                    font-size: 20px;
                                    font-weight: 700;
                                    color: rgb(255, 187, 0)
                                }

                                &:nth-child(2) {
                                    padding-top: 6px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>